import React,{useEffect} from 'react'
import * as echarts from "echarts"
import ChinaCities from "../../assetst/json/china-cities.json"
export default function SicuanMap() {
  useEffect(()=>{
    echartsInit()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[])
  const myon=(val)=>{
       alert(val)
  }
  const echartsInit=()=>{
    const myChart = echarts.init(document.getElementById("main"))
    // 注册地图
    echarts.registerMap("china-cities",ChinaCities);
    const option={
      tooltip:{// 提示框组件的通用介绍：
        show:true,
        triggerOn: 'click',
        enterable: true,
        formatter:(params)=>{
          console.log(params)
          let name = params.name
          let value = (params.value&&params.data.value)||0
          return `<div onclick="${myon(name)}">名称:${name} 值:${value}</div>`
        }
       },
      series:[
        {  name:"四川",
          type:"map",
          map:"china-cities",
          zoom:1,
          roam:true,
          label:{
              show:true,
              fontSize:5
          },
          itemStyle:{ //地图区域的多边形 图形样式。
            areaColor:"#f1f1f1",
            borderColor:"rgba(0,0,0,0.5)"
        },
          data:[
            { name:"眉山市",value:"10"},
            { name:"成都市",value:"100"}
          ]
      }
      ]
    }
    myChart.setOption(option)
  }
  return (
    <div>
        
    </div>
  )
}
